<template>
  <div class="divBox">
    <el-card class="box-card">
      <div class="flex">
        <div class="leftModel">
          <div v-show="currentPage == 'home'">
            <div class="model_header">
              <img src="https://image.java.crmeb.net/crmebimage/operation/2021/07/16/b037a693547e49a7962fcd647ed5aca8bd6lohpqva.png" alt=""/>
              <div class="header_search">
                <span class="iconfont iconios-search"></span>
              </div>
            </div>
            <div class="model_banner" @click="handleMessage('indexBanner')">
              <el-carousel indicator-position="none" height="139px">
                <el-carousel-item v-for="(item,index) in dataList[1]" :key="index">
                  <img :src="item.pic" alt="" :class="{select_ctive:shows == 1}" style="width: 100%; border-radius: 4px" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="model_news" :class="{select_ctive:shows == 2}" @click="handleMessage('indexNews')">
              <img src="https://image.beta.java.crmeb.net/crmebimage/change/new_header/new_header1.png" alt="" style="width: 64px; height: 17px"/>
              <span style="color: #ccc">|</span>
              <p>CRMEB电商系统Java版正式发布！</p>
              <!-- <template>
                 <el-carousel height="34px" direction="vertical" :autoplay="true">
                  <el-carousel-item v-for="(item,index) in menuInfo.indexNews" :key="index">
                    <p style="line-height:34px;">{{item.info}}</p>
                  </el-carousel-item>
                </el-carousel>
              </template> -->
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="model_nav " :class="{select_ctive:shows == 3}" @click="handleMessage('indexMenu')">
              <div class="model_nav_item" v-for="(item,index) in dataList[0]" :key="index">
                <div>
                  <img :src="item.pic" alt="" />
                </div>
                <p>{{item.name}}</p>
              </div>
            </div>
            <div class="tab_nav_bd" :class="{select_ctive:shows == 4}" @click="handleMessage('indexTabNav')">
              <div class="nav_bd_item" :class="{label_active:tabActive === index}" v-for="(item,index) in indexTab" :key="index" @click="switchNav(index)">
                <span class="item_txt">{{item.name}}</span>
                <span class="item_label">{{item.info}}</span>
              </div>
            </div>
            <div class="moni_goods">模拟商品区域</div>
          </div>
          <div v-show="currentPage == 'cate'">
            <img :src="cateImg" alt="" style="width:375px;">
          </div>
          <div v-show="currentPage == 'user'">
            <div class="user_head">
              <div class="user_bg" :style="{ 'backgroundImage':'url('+ urlbg +')' }">
                <div class="user_card">
                  <div class="user_info">
                    <img src="@/assets/imgs/default_avatar.png" alt="">
                    <div class="info">
                      <p class="nick_name">用户信息</p>
                      <p class="phone">123456</p>
                    </div>
                  </div>
                  <div class="num_wrapper">
                    <div class="num_wrap_item">
                      <p class="num_item_bold">0</p>
                      <p class="num_title">余额</p>
                    </div>
                    <div class="num_wrap_item">
                      <p class="num_item_bold">0</p>
                      <p class="num_title">积分</p>
                    </div>
                    <div class="num_wrap_item">
                      <p class="num_item_bold">0</p>
                      <p class="num_title">优惠券</p>
                    </div>
                    <div class="num_wrap_item">
                      <p class="num_item_bold">0</p>
                      <p class="num_title">收藏</p>
                    </div>
                  </div>
                </div>
                <div class="order_wrap">
                  <div class="order_wrap_tit">
                    <span class="weight_600">订单中心</span>
                    <div>
                      <span class="font_sm">查看全部</span>
                      <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                  <div class="order_wrap_list">
                    <div class="order_list_item">
                     <img src="@/assets/imgs/fukuan.png" alt="">
                     <p>待付款</p>
                    </div>
                    <div class="order_list_item">
                     <img src="@/assets/imgs/fahuo.png" alt="">
                     <p>待发货</p>
                    </div>
                    <div class="order_list_item">
                     <img src="@/assets/imgs/shouhuo.png" alt="">
                     <p>待收货</p>
                    </div>
                    <div class="order_list_item">
                     <img src="@/assets/imgs/pingjia.png" alt="">
                     <p>待评价</p>
                    </div>
                    <div class="order_list_item">
                     <img src="@/assets/imgs/tuikuan.png" alt="">
                     <p>售后/退款</p>
                    </div>
                  </div>
                </div>
                <div class="slider_img" :class="{select_ctive:shows == 5}" @click="handleMessage('userBanner')">
                  <el-carousel height="69px" :autoplay="true">
                    <el-carousel-item v-for="(item,index) in dataList[4]" :key="index">
                      <img :src="item.pic" alt="" style="height:69px;display:block;margin:auto;">
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div class="user_mens" :class="{select_ctive:shows == 6}" @click="handleMessage('userMenu')">
                  <div class="menu_title">我的服务</div>
                  <div class="list_box">
                    <div class="list_box_item" v-for="(item,index) in dataList[2]" :key="index">
                      <img :src="item.pic" alt="">
                      <p>{{item.name}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="fixed_tab">
            <div class="bottom_tab_item" @click="showCurrent('home')">
              <img src="@/assets/imgs/tabBar/index.png" alt="" />
              <p class="">首页</p>
            </div>
            <div class="bottom_tab_item" @click="cateNav()">
              <img src="@/assets/imgs/tabBar/cate.png" alt="" />
              <p class="">分类</p>
            </div>
            <div class="bottom_tab_item shop_cart" @click="showTip()">
              <img src="@/assets/imgs/tabBar/cart.png" alt="" />
              <p>购物车</p>
            </div>
            <div class="bottom_tab_item"  @click="showCurrent('user')">
              <img src="@/assets/imgs/tabBar/user.png" alt="" />
              <p class="">我的</p>
            </div>
          </div>
        </div>
        <!-- <iframe class="iframe-box" :src="iframeUrl" frameborder="0" ref="iframe"></iframe> -->
        <div class="flex_between">
          <div class="right-box" v-if="typeName">
            <div class="title-bar">模块配置</div>
            <div class="mobile-config">
              <div v-for="(item, index) in menuList" :key="index" class="item">
                <div
                  class="move-icon"
                  draggable="true"
                  @dragstart="handleDragStart($event, item)"
                  @dragover.prevent="handleDragOver($event, item)"
                  @dragenter="handleDragEnter($event, item)"
                  @dragend="handleDragEnd($event, item)"
                >
                  <span class="iconfont icondrag2"></span>
                </div>
                <div class="picBox" v-if="typeName !== 'indexNews'">
                  <div class="img-box" @click="modalPicTap('1', 'duo', index, true)" >
                    <img :src="item.pic" alt="" v-if="item.pic" />
                    <div v-else class="upLoad">
                      <i class="el-icon-camera cameraIconfont" />
                    </div>
                  </div>
                </div>
                <div v-if="index > 0" class="delect-btn" @click.stop="bindDelete(item, index)" >
                  <i class="el-icon-circle-close"></i>
                </div>
                <div class="info">
                  <div v-if="typeName !== 'userBanner'" class="info-item">
                    <span>标题</span>
                    <div class="input-box">
                      <el-input v-if="typeName !== 'indexNews'" v-model="item.name" :placeholder="'请填写' + item.name" maxlength="4" />
                      <el-input v-else v-model="item.info" :placeholder="'请填写' + item.info" />
                    </div>
                  </div>
                  <div class="info-item" v-if="addUrlStatus && typeName !== 'indexTabNav'">
                    <span>链接</span>
                    <div class="input-box">
                      <el-input v-model="item.url" placeholder="请填写链接" />
                    </div>
                  </div>
                  <div class="info-item" v-if="typeName == 'indexTabNav'">
                    <span>简介</span>
                    <div class="input-box">
                      <el-input v-model="item.info" placeholder="请填写简介" />
                    </div>
                  </div>
                  <div class="info-item">
                    <span>状态</span>
                    <div class="input-box">
                      <el-switch v-model="item.status" :active-value="true" :inactive-value="false" active-text="显示" inactive-text="隐藏" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="add-btn mb20 mt20">
                <el-button ghost style="width: 100%;height: 40px;border-color: #1890ff;color: #1890ff;" @click="addBox" >添加数据
                </el-button>
              </div>
              <div style="text-align: center">
                <el-button type="primary" style="width: 100%; margin: 0 auto; height: 40px" @click="saveConfig">保存</el-button>
              </div>
            </div>
          </div>
          <div class="right-box" v-if="typeName">
            <div class="link-item" v-for="(item, index) in list" :key="index">
              <div class="title">{{ item.name }}</div>
              <div class="txt"><span>地址：</span>{{ item.url }}</div>
              <div class="txt" v-if="item.parameter">
                <p><span>参数：</span></p>
                <span>{{ item.parameter }}</span>
                <!-- style="color:#15BF6B;" -->
              </div>
              <div class="tips">
                例如：{{ item.example }}
                <span class="copy copy-data" :data-clipboard-text="item.example"
                  >复制</span
                >
              </div>
            </div>
          </div>
          <div class="tip" v-if="!typeName && tip == true && cate == false">请选择左侧可操作可编辑区域</div>
          <div class="" v-if="typeName == '' && currentPage == 'cate' && cate == true">
            <el-row>
              <el-col :span="5" v-for="(item,index) in cateArr" :key="index" :offset="index > 0 ? 1 : 0" >
                <el-card :body-style="{ padding: '0px' }" class="card_cate" :class='index==active?"on":""'>
                  <div class="card_bt flex justify-between align-center">
                    <span>{{item.tit}}</span>
                  </div>
                  <img :src="item.img" class="image" @click="switchTab(index)">
                </el-card>
              </el-col>
            </el-row>
            <div style="margin-top:20px;font-size:16px;">
                <div >
                  是否显示左侧一级菜单：
                  <el-radio-group v-model="radio" :disabled="active == 0 || active == 1">
                    <el-radio label="1" border>显示</el-radio>
                    <el-radio label="0" border>不显示</el-radio>
                  </el-radio-group>
                </div>
                <div style="margin-top:20px;">
                  <el-button type="primary" @click="save()">保存</el-button>
                </div>
              </div>
           </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { designListApi, SaveDataApi , goodDesignList,getDataApi } from "@/api/systemGroup";
import ClipboardJS from "clipboard";
export default {
  name: "index",
  data() {
    return {
      iframeUrl: "",
      menuList: [],
      menuInfo: {},
      typeName: "",
      list: [
        {
          name: "商城首页",
          url: "/pages/index/index",
          parameter: [{}],
          example: "/pages/index/index",
        },
        {
          name: "个人中心",
          url: "/pages/user/index",
          parameter: [{}],
          example: "/pages/user/index",
        },
        {
          name: "购物车",
          url: "/pages/order_addcart/order_addcart",
          parameter: [{}],
          example: "/pages/order_addcart/order_addcart",
        },
        {
          name: "商品分类",
          url: "/pages/goods_cate/goods_cate",
          parameter: [{}],
          example: "/pages/goods_cate/goods_cate",
        },
        {
          name: "商品详情",
          url: "/pages/goods_details/index",
          parameter: "id=商品ID",
          example: "/pages/goods_details/index?id=52",
        },
        {
          name: "找回密码",
          url: "/pages/retrieve_password/index",
          parameter: [{}],
          example: "/pages/retrieve_password/index",
        },
        {
          name: "商品列表",
          url: "/pages/goods_list/index",
          parameter: [{}],
          example: "/pages/goods_list/index",
        },
        {
          name: "资讯",
          url: "/pages/news_list/index",
          parameter: [{}],
          example: "/pages/news_list/index",
        },
        {
          name: "资讯详情",
          url: "/pages/news_details/index",
          parameter: 'id=新闻ID',
          example: "/pages/news_details/index?id=3",
        },
        {
          name: "搜索商品",
          url: "/pages/goods_search/index",
          parameter: [{}],
          example: "/pages/goods_search/index",
        },
        // {
        //   name: "支付状态",
        //   url: "/pages/order_pay_status/index",
        //   parameter: [{}],
        //   example: "/pages/order_pay_status/index",
        // },
        {
          name: "订单详情",
          url: "/pages/order_details/index",
          parameter: "order_id=订单ID",
          example: "/pages/order_details/index/?order_id=order123",
        },
        {
          name: "隐私协议",
          url: "/pages/users/privacy/index",
          parameter: [{}],
          example: "/pages/users/privacy/index",
        },
        {
          name: "客服",
          url: "/pages/users/web_page/index",
          parameter: [{}],
          example: "/pages/users/web_page/index",
        },
        {
          name: "忘记密码",
          url: "/pages/users/retrievePassword/index",
          parameter: [{}],
          example: "/pages/users/retrievePassword/index",
        },
        {
          name: "个人资料",
          url: "/pages/users/user_info/index",
          parameter: [{}],
          example: "/pages/users/user_info/index",
        },
        {
          name: "领取优惠券",
          url: "/pages/users/user_get_coupon/index",
          parameter: [{}],
          example: "/pages/users/user_get_coupon/index",
        },
        {
          name: "收藏商品",
          url: "/pages/users/user_goods_collection/index",
          parameter: [{}],
          example: "/pages/users/user_goods_collection/index",
        },
        {
          name: "签到",
          url: "/pages/users/user_sgin/index",
          parameter: [{}],
          example: "/pages/users/user_sgin/index",
        },
        {
          name: "签到记录",
          url: "/pages/users/user_sgin_list/index",
          parameter: [{}],
          example: "/pages/users/user_sgin_list/index",
        },
        {
          name: "我的账户",
          url: "/pages/users/user_money/index",
          parameter: [{}],
          example: "/pages/users/user_money/index",
        },
        {
          name: "账单明细",
          url: "/pages/users/user_bill/index",
          parameter: 'type=账单类型',
          example: "/pages/users/user_bill/index?type=all",
        },
        {
          name: "积分详情",
          url: "/pages/users/user_integral/index",
          parameter: [{}],
          example: "/pages/users/user_integral/index",
        },
        {
          name: "我的优惠券",
          url: "/pages/users/user_coupon/index",
          parameter: [{}],
          example: "/pages/users/user_coupon/index",
        },
        {
          name: "我的推广",
          url: "/pages/users/user_spread_user/index",
          parameter: [{}],
          example: "/pages/users/user_spread_user/index",
        },
        {
          name: "分销海报",
          url: "/pages/users/user_spread_code/index",
          parameter: [{}],
          example: "/pages/users/user_spread_code/index",
        },
        {
          name: "佣金记录",
          url: "/pages/users/user_spread_money/index",
          parameter: 'type=类型&commissionCount=佣金金额',
          example: "/pages/users/user_spread_money/index?type=2&commissionCount=0.00",
        },
        {
          name: "提现",
          url: "/pages/users/user_cash/index",
          parameter: [{}],
          example: "/pages/users/user_cash/index",
        },
        {
          name: "地址管理",
          url: "/pages/users/user_address_list/index",
          parameter: [{}],
          example: "/pages/users/user_address_list/index",
        },
        {
          name: "添加地址",
          url: "/pages/users/user_address/index",
          parameter: [{}],
          example: "/pages/users/user_address/index",
        },
        {
          name: "修改手机号",
          url: "/pages/users/user_phone/index",
          parameter: [{}],
          example: "/pages/users/user_phone/index",
        },
        {
          name: "余额充值",
          url: "/pages/users/user_payment/index",
          parameter: [{}],
          example: "/pages/users/user_payment/index",
        },
        {
          name: "修改密码",
          url: "/pages/users/user_pwd_edit/index",
          parameter: [{}],
          example: "/pages/users/user_pwd_edit/index",
        },
        {
          name: "提交订单",
          url: "/pages/users/order_confirm/index",
          parameter: 'preOrderNo=预订单号',
          example: "/pages/users/order_confirm/index?preOrderNo=1091627618511",
        },
        {
          name: "门店列表",
          url: "/pages/users/goods_details_store/index",
          parameter: [{}],
          example: "/pages/users/goods_details_store/index",
        },
        {
          name: "推广人列表",
          url: "/pages/users/promoter-list/index",
          parameter: [{}],
          example: "/pages/users/promoter-list/index",
        },
        {
          name: "推广人订单",
          url: "/pages/users/promoter-order/index",
          parameter: [{}],
          example: "/pages/users/promoter-order/index",
        },
        {
          name: "推广人排行",
          url: "/pages/users/promoter_rank/index",
          parameter: [{}],
          example: "/pages/users/promoter_rank/index",
        },
        {
          name: "佣金排行",
          url: "/pages/users/commission_rank/index",
          parameter: [{}],
          example: "/pages/users/commission_rank/index",
        },
        {
          name: "我的订单",
          url: "/pages/users/order_list/index",
          parameter: [{}],
          example: "/pages/users/order_list/index",
        },
        {
          name: "物流信息",
          url: "/pages/users/goods_logistics/index",
          parameter: [{}],
          example: "/pages/users/goods_logistics/index",
        },
        {
          name: "退货列表",
          url: "/pages/users/user_return_list/index",
          parameter: [{}],
          example: "/pages/users/user_return_list/index",
        },
        {
          name: "申请退货",
          url: "/pages/users/goods_return/index",
          parameter: [{}],
          example: "/pages/users/goods_return/index",
        },
        {
          name: "登录",
          url: "/pages/users/login/index",
          parameter: [{}],
          example: "/pages/users/promoter-list/index",
        },
        {
          name: "商品评分",
          url: "/pages/users/goods_comment_list/index",
          parameter: 'productId=商品ID',
          example: "/pages/users/goods_comment_list/index?productId=69",
        },
        {
          name: "商品评价",
          url: "/pages/users/goods_comment_con/index",
          parameter: 'unique=商品attrid&orderId=订单ID&id=ID',
          example: "/pages/users/goods_comment_con/index?unique=2032&orderId=order123&id=407",
        },
        {
          name: "账户登录",
          url: "/pages/users/wechat_login/index",
          parameter: [{}],
          example: "/pages/users/wechat_login/index",
        },
        {
          name: "绑定手机号",
          url: "/pages/users/app_login/index",
          parameter: [{}],
          example: "/pages/users/app_login/index",
        },
      ],
      currentPage:"home",
      modelBanner: [
        "https://image.java.crmeb.net/crmebimage/maintain/2021/07/06/c99ee385e94d4711a0ea4be72169a86euwmzuhxbb2.jpg",
      ],
      urlbg:require('@/assets/imgs/user_bg.png'),
      indexTab:[],
      dataList:[],
      addUrlStatus:true,
      infoStatus:false,
      showStatus:false,
      shows:0,
      indextTabMenu:[],
      tabActive:0,
      cate:false,
      tip:false,
      cateArr:[
        {img:require('@/assets/imgs/moren.png'),tit:'默认模板'},
        {img:require('@/assets/imgs/youxuan.png'),tit:'模板1'},
        {img:require('@/assets/imgs/haowu.png'),tit:'模板2'},
        {img:require('@/assets/imgs/shengxian.png'),tit:'模板3'},
      ],
      cateImg:'',
      active:0,
      disabled:false,
      radio: "1"
    };
  },
  created() {
    this.iframeUrl = `https://app.beta.java.crmeb.net?type=iframeVisualizing`;
  },
  mounted() {
    //监听子页面给当前页面传值
    window.addEventListener("message", this.handleMessage, false);
    this.designList();
    this.$set(this,'typeName','');
    this.$set(this,'tip',true);
    this.$nextTick(function () {
      const clipboard = new ClipboardJS(".copy-data");
      clipboard.on("success", () => {
        this.$message.success("复制成功");
      });
    });
  },
  methods: {
    addBox() {
      if (this.menuList.length >= 10 && this.typeName == 'indexMenu') {
        this.$message.warning("设置数据不能超过10条");
      }else if(this.typeName == 'indexTabNav' && this.menuList.length >= 4){
        this.addUrlStatus = false;
        this.infoStatus = true;
        this.$message.warning("设置数据不能超过4条");
      }
      else {
        const indexMenu = JSON.parse(JSON.stringify(this.menuList[0]));
        indexMenu.id = null;
        indexMenu.name = "";
        indexMenu.url = "";
        indexMenu.info = "";
        indexMenu.pic = "";
        this.menuList.push(indexMenu);
      }
    },
    // 获取列表值；
    designList() {
      designListApi(0).then((res) => {
        this.menuInfo = res;
        let newArr = [];
        let indexMenu = res.indexMenu.filter((item, index,arr)=>{ return item.status == true});
        let indexBanner = res.indexBanner.filter((item, index,arr)=>{ return item.status == true});
        let userMenu = res.userMenu.filter((item, index,arr)=>{ return item.status == true});
        let indexNews = res.indexNews.filter((item, index,arr)=>{ return item.status == true});
        let userBanner = res.userBanner.filter((item, index,arr)=>{ return item.status == true});
        newArr.push(indexMenu,indexBanner,userMenu,indexNews,userBanner);
        this.dataList = newArr;

      });
      goodDesignList({gid:70}).then((response)=>{
       let list = response.list;
        let arr = [];
        let arr1 = [];
        list.forEach((item)=>{
          let obj = {};
          obj.value = JSON.parse(item.value);
          obj.id = item.id;
          obj.gid = item.gid;
          obj.status = item.status;
          obj.storeId=item.storeId;
          arr.push(obj);
        })
        arr.forEach((item1)=>{
          let obj1 = {};
          obj1.pic = item1.value.fields[0].value;
          obj1.name = item1.value.fields[1].value;
          obj1.info = item1.value.fields[2].value;
          obj1.type = item1.value.fields[3].value;
          obj1.id = item1.id;
          obj1.gid = item1.gid;
          // obj1.show = '1';
          obj1.status = item1.status;
          obj1.storeId=item1.storeId;
          arr1.push(obj1);
          this.indextTabMenu = arr1;
          let indexTab = arr1.filter((item, index,arr)=>{ return item.status == true});
          this.indexTab = indexTab;
        })
        //
      })
    },
    //
    handleMessage(event) {
      // this.typeName = event.data.name;
      this.typeName = event;
      switch (event) {
        case "indexMenu":
          this.menuList = this.menuInfo.indexMenu;
          this.shows = 3;
          break;
        case "indexBanner":
          this.menuList = this.menuInfo.indexBanner;
          this.shows = 1;
          break;
        case "userMenu":
          this.menuList = this.menuInfo.userMenu;
          this.shows = 6;
          break;
        case "indexNews":
          this.menuList = this.menuInfo.indexNews;
          this.shows = 2;
          break;
        case "userBanner":
          this.menuList = this.menuInfo.userBanner;
          this.shows = 5;
          break;
        case "indexTabNav":
          this.menuList = this.indextTabMenu;
          this.shows = 4;
      }
    },
    switchNav(index){
      this.tabActive = index;
    },
    // 点击商品图
    modalPicTap(tit, num, i, boolean) {
      const _this = this;
      this.$modalUpload(
        function (img) {
          if (tit === "1" && num === "duo") {
            _this.menuList[i].pic = img[0].sattDir;
          }
        },
        tit,
        "content",
        true
      );
    },
    // 删除
    bindDelete(item, index) {
      this.menuList.splice(index, 1);
    },
    saveConfig() {
      switch (this.typeName) {
        case "indexMenu":
          this.saveData("indexMenu", "/admin/page/layout/index/menu/save");
          break;
        case "indexBanner":
          this.saveData("indexBanner", "/admin/page/layout/index/banner/save");
          break;
        case "userMenu":
          this.saveData("userMenu", "/admin/page/layout/user/menu/save");
          break;
        case "indexNews":
          this.saveData("indexNews", "/admin/page/layout/index/news/save");
          break;
        case "userBanner":
          this.saveData("userBanner", "/admin/page/layout/user/banner/save");
          break;
        case "indexTabNav":
          this.saveData("indexTable", "/admin/page/layout/index/table/save");
      }
    },
    saveData(param, url) {
      let tArr = this.menuList.filter((item, index,arr)=>{ return item.status == true});
      if(this.typeName == 'indexMenu' && tArr.length < 5){
        this.$message.warning("设置数据不能小于5条");
      }else if(this.typeName == 'indexTabNav' && tArr.length < 2){
        this.$message.warning("设置数据不能小于2条");
      }else{
        SaveDataApi({ [param]: this.changeIndex(this.menuList),type:0}, url).then(
          (res) => {
            this.$message.success("保存成功");
            this.designList();
          }
        );
      }
    },
    changeIndex(array) {
      array.map((item, index) => {
        item.sort = index;
      });
      return array;
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.menuList];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.menuList = newItems;
    },
    showCurrent(name){
      this.currentPage = name;
      this.$set(this,'typeName','');
      this.$set(this,'tip',true);
      this.$set(this,'cate',false);
    },
    showTip(){
      this.$message.warning("暂不支持此操作");
    },
    cateNav(){
      this.currentPage ='cate';
      this.$set(this,'typeName','');
      this.$set(this,'cate',true);
      this.getConfig();
    },
    switchTab(index){
      this.active = index;
      if(this.active == 0){
        this.cateImg = require('@/assets/imgs/moren.png')
      }else if(this.active == 1){
        this.cateImg = require('@/assets/imgs/youxuan.png')
      }else if(this.active == 2){
        this.cateImg = require('@/assets/imgs/haowu.png')
      }else if(this.active == 3){
        this.cateImg = require('@/assets/imgs/shengxian.png')
      }
    },
    save(){
      let data = {
        category_page_config: this.active + 1,
        is_show_category:this.radio == '1'? true: false
      };
       SaveDataApi(data, '/admin/page/layout/category/config/save').then(
        (res) => {
          this.$message.success("保存成功");
        }
      );
    },
    getConfig(){
      let data={
        type:0
      }
      getDataApi(data).then((res) => {
          this.$set(this,'active',res.categoryConfig - 1);
          this.$set(this,'radio',res.isShowCategory == 'true'? "1" : "0");
          this.switchTab(this.active)
        }
      );
    }
  },
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  flex-wrap: nowrap;
}
.justify-between{
  justify-content: space-between;
}
.align-center{
  align-items: center;
}
.iframe-box {
  width: 375px;
  height: 700px;
  border-radius: 4px;
  box-shadow: 0 0 7px #cccccc;
  margin-right: 50px;
}
.leftModel {
  width: 375px;
  height: 700px;
  border-radius: 4px;
  box-shadow: 0 0 7px #cccccc;
  margin-right: 50px;
  background: #f5f5f5;
  position: relative;
}
.model_header {
  width: 375px;
  height: 54px;
  background: #e93323;
  padding: 13px 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.model_header img {
  width: 58px;
  height: 20px;
  display: block;
  margin-right: 11px;
}
.model_header .header_search {
  width: 271px;
  height: 28px;
  line-height: 28px;
  padding: 0 0 0 14px;
  background: #f7f7f7;
  border: 1px solid #f1f1f1;
  border-radius: 14px;
  color: #bbb;
  font-size: 18px;
}
.model_banner {
  width: 375px;
  height: 139px;
  padding: 0 15px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #e93323 0%, #f5f5f5 100%);
}
.model_news {
  margin: 12px auto 12px;
  padding: 0 6px 0;
  width: 345px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #fff;
  line-height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.model_nav {
  width: 345px;
  height: 158px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #fff;
  margin: 0 auto 12px;
  display: flex;
  flex-wrap: wrap;
}
.model_nav_item {
  width: 20%;
  height: 59px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
.model_nav_item img {
  width: 40px;
  height: 40px;
}
.model_nav_item p {
  font-size: 12px;
  color: #454545;
  padding-top: 3px;
}
.tab_nav_bd{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  white-space: nowrap;
  margin: 15px 0 15px;
  padding: 5px 15px 5px;
  border: 1px solid #f5f5f5;
  cursor: pointer;
}
.nav_bd_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.item_txt{
  color: #282828;
}
.item_label{
  width: 62px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  font-size: 12px;
  border-radius: 8px;
  color: #999;
}
.label_active{
  .item_txt{
    color: #e93323 !important;
  }
  .item_label{
    color: #fff;
    background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
  }
}
.shop_cart{
  opacity: .6;
}
.moni_goods{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:160px;
  padding: 0 15px 0;
  font-size: 20px;
  font-weight: bold;
}
.user_head{
  width: 375px;
  height: 262px;
  background: linear-gradient(180deg, #808080 0%, #F5F5F5 100%);
}
.user_card{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 17px 0 14px 0;
}
.user_info{
  display: flex;
}
.user_info img{
  width: 59px;
  height: 59px;
  border-radius: 50%;
}
.user_info .info{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 9px;
  padding: 7px 0;
}
.nick_name{
  color: #fff;
  font-size: 15px;
}
.phone{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.num_wrapper{
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color:#fff;
}
.num_wrap_item{
  width: 25%;
  text-align: center;
}
.num_item_bold{
  font-size: 20px;
  font-weight: bold;
}
.num_title{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.order_wrap{
  background-color: #fff;
  border-radius: 6px;
  padding: 14px 7px;
  width: 345px;
  height: 112px;
  margin: auto;
}
.order_wrap_tit{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color:gray;
  margin-bottom: 19px;
  padding: 0 7px;
}
.weight_600{
  font-weight: 600;
}
.font_sm{
  font-size: 12px;
}
.order_wrap_list{
  display: flex;
  justify-content: space-between;
}
.order_list_item{
  width:20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.order_list_item img{
  width: 24px;
  display: block;
  margin-bottom: 7px;
  -webkit-filter: grayscale(1); /* Webkit */
  filter: gray; /* IE6-9 */
  filter: grayscale(1);
}
.order_list_item p{
  font-size: 13px;
  color:gray；
}
.slider_img{
  margin: 10px auto;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #f5f5f5;
  width: 345px;
  height: 69px;
}
.user_mens{
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 6px;
  width: 345px;
}
.menu_title{
  padding: 15px 15px 20px;
  font-size: 15px;
  color: #282828;
  font-weight: 600;
}
.list_box{
  display: flex;
  flex-wrap: wrap;
}
.list_box_item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 25%;
  margin-bottom: 23px;
  font-size: 13px;
  color:#333;
}
.list_box_item img{
  width: 26px;
  height: 26px;
  display: block;
  margin-bottom: 9px;
}
.user_bg{
  width: 100%;
  height: 208px;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 15px 0;
}
.fixed_tab {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
}
.bottom_tab_item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor:pointer;
}
.bottom_tab_item img {
  width: 24px;
  height: 24px;
  display: block;
  margin-bottom: 3px;
}
.bottom_tab_item .red_color{
  color:#E93323;
}
.active{
  color:#E93323;
}
.move-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 80px;
  cursor: move;
  color: #d8d8d8;
  .icondrag2 {
    font-size: 25px;
    cursor: move;
  }
}
.select_ctive{
  border: 1px dashed #666;
  box-sizing: border-box;
}
.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_between {
  flex: 1;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.tip {
  width: 100%;
  text-align: center;
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.right-box {
  width: 50%;
  min-width: 400px;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 700px;
  overflow-y: scroll;
  padding: 0 10px;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #fff;
    border-radius: 4px;
    background: #fff;
  }
}

.title-bar {
  width: 100%;
  height: 38px;
  line-height: 38px;
  padding-left: 2px;
  color: #333;
  border-radius: 4px;
  border-bottom: 1px solid #eee;
}

.mobile-config {
  padding: 0 15px 20px 0px;
  .item {
    position: relative;
    display: flex;
    margin-top: 20px;
  }
  .picBox {
    cursor: pointer;
    position: relative;
  }
  .delect-btn {
    position: absolute;
    right: -12px;
    top: -16px;
    color: #999999;
    z-index: 11;
    .el-icon-circle-close {
      font-size: 21px;
      color: #999;
      cursor: pointer;
    }
  }
  .img-box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: 1;
    margin-left: 12px;
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    span {
      width: 40px;
      font-size: 13px;
    }
    .input-box {
      flex: 1;
    }
  }
}

.link-item {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  .title {
    font-size: 14px;
    color: #2d8cf0;
  }
  .txt {
    margin: 5px 0;
    font-size: 12px;
    span {
      color: #333;
    }
    p {
      display: inline-block;
      color: #19be6b;
      margin-right: 10px;
      span {
        color: #333;
      }
      &.red {
        color: #f00;
      }
    }
  }
  .tips {
    font-size: 12px;
    color: #999;
    .copy {
      padding: 3px 5px;
      border: 1px solid #cccccc;
      border-radius: 5px;
      color: #333;
      cursor: pointer;
      margin-left: 5px;
      &:hover {
        border-color: #2d8cf0;
        color: #2d8cf0;
      }
    }
  }
}
.on{
  border: 1px solid #1DB0FC;
}
.image {
  width: 100%;
  display: block;
}
// .card_cate{
//   border:2px solid #e6ebf5;
// }
.card_bt{
  padding: 14px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  span{
    font-size: 18px;
    font-weight: 600;
  }
}
</style>
